<template>
  <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item name="1">
      <template #title>
        <el-icon class="header-icon"><LocationFilled /></el-icon>
        最新检测任务
      </template>
      <!--可视化部分-->
      <div class="time">当前时间：{{ time }}</div>
      <carlayout />
    </el-collapse-item>

    <el-collapse-item name="2">
      <template #title>
        <el-icon class="header-icon">
          <HelpFilled />
        </el-icon>
        历史检测任务
      </template>
      <!--搜索部分-->
      <el-card>
        <el-form inline>
          <el-form-item style="width: 20%">
            <span class="demonstration"></span>
            <el-date-picker
              v-model="dateTimepickUp"
              type="datetimerange"
              :shortcuts="shortcuts"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="datepickup"
              value-format="YYYY-MM-DDTHH:mm:ss"
            />
          </el-form-item>
          <el-form-item label="雪橇号">
            <el-input
              v-model="query.skidNumber"
              placeholder="请输入雪橇号"
            ></el-input>
          </el-form-item>
          <el-form-item label="车型">
            <el-input
              v-model="query.carType"
              placeholder="请输入车型"
            ></el-input>
          </el-form-item>
          <el-form-item label="车号">
            <el-input
              v-model="query.carNumber"
              placeholder="请输入车号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="search"></el-button>
            <el-button type="primary" icon="Refresh" @click="reset"></el-button>
            <el-button
              type="primary"
              icon="Share"
              @click="exportData"
            ></el-button>
            <el-button
              type="primary"
              icon="UploadFilled"
              @click="importData"
            ></el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <!--图表部分-->
      <el-card style="margin: 5px 0px">
        <el-table
          border
          style="margin: 10px 0px"
          :data="pageData"
          :row-class-name="tableRowClassName"
          height="550"
          @sort-change="sortChange"
        >
          <el-table-column
            label="序号"
            align="center"
            width="80px"
            prop="Nr"
          ></el-table-column>
          <el-table-column
            label="Date"
            align="center"
            prop="Date"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            label="SkidNumber"
            align="center"
            prop="SkidNumber"
          ></el-table-column>
          <el-table-column
            label="CarType"
            align="center"
            prop="CarType"
          ></el-table-column>
          <el-table-column
            label="CarNumber"
            align="center"
            prop="CarNumber"
          ></el-table-column>
          <el-table-column
            label="Pos"
            align="center"
            width="80px"
            prop="Pos"
          ></el-table-column>
          <el-table-column
            label="Avg"
            align="center"
            prop="Avg"
          ></el-table-column>
          <el-table-column label="Eva" align="center">
            <template #="{ row, index }">
              <div class="imgcontainer">
                <img
                  src="@/assets/images/OK.png"
                  v-show="row.Eva == 'good'"
                  style="width: 30px; height: 30px"
                />
                <img
                  src="@/assets/images/NOK.png"
                  v-show="row.Eva == 'bad'"
                  style="width: 30px; height: 30px"
                />
                <img
                  src="@/assets/images/警告.png"
                  v-show="row.Eva == 'warning'"
                  style="width: 30px; height: 30px"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="120px"
          >
            <template #="{ row, index }">
              <el-button type="primary" @click="openDia(row)">...</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :background="true"
          layout=" prev, pager, next, jumper,->,sizes,total"
          :total="total"
          @size-change="getLine3ListByPage(1)"
          @current-change="getLine3ListByPage"
        />
      </el-card>
    </el-collapse-item>

    <el-collapse-item name="3">
      <template #title>
        <el-icon class="header-icon">
          <HelpFilled />
        </el-icon>
        统计图标
      </template>
      <!--图表部分-->
     
     
    </el-collapse-item>

    <el-collapse-item name="4">
      <template #title>
        <el-icon class="header-icon">
          <HelpFilled />
        </el-icon>
        三线门槛视觉检测状态
      </template>
      
      <el-card class="card-box">
        <div class="card-contentL">
         <LineL></LineL>
        </div>
        <div class="card-contentR">
          <LineR></LineR>
        </div>
      </el-card>
    </el-collapse-item>
  </el-collapse>

  <!--弹出图片部分-->
  <el-dialog
    v-model="visible"
    draggable="true"
    style="width: 1100px; height: 550px"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">
          <el-tag style="margin: 5px 5px">序号：{{ dialogInfo.Nr }}</el-tag>
          <el-tag style="margin: 5px 5px">
            雪橇号：{{ dialogInfo.SkidNumber }}
          </el-tag>
          <el-tag style="margin: 5px 5px">
            车身号：{{ dialogInfo.CarNumber }}
          </el-tag>
        </h4>
        <el-button type="danger" class="close-btn" @click="close">
          <el-icon>
            <CircleCloseFilled />
          </el-icon>
          Close
        </el-button>
      </div>
    </template>

    <el-div style="width: 1000px; height: 500px">
      <el-carousel
        indicator-position="outside"
        arrow="always"
        style="width: 1050px; height: 450px"
      >
        <el-carousel-item
          v-for="item in dialogInfo.imgList"
          :key="item.name"
          style="width: 1090px; height: 450px"
        >
          <h3 text="2xl" justify="center">{{ item.name }}</h3>
          <hr />
          <div>
            <el-image
              style="width: 500px; height: 300px"
              fit="cover"
              :src="item.url"
              :preview-src-list="[item.url]"
              :initial-index="4"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
            />
          </div>

          <div>点击图片预览</div>
        </el-carousel-item>
      </el-carousel>
    </el-div>
  </el-dialog>

  <!--导入数据弹框-->
  <el-dialog v-model="dialogImportVisible" title="导入" width="30%">
    <el-form label-width="120px">
      <el-form-item label="门槛数据">
        <el-upload
          class="upload-demo"
          :action="setting.RP2_importData_path"
          :on-success="onUploadSuccess"
        >
          <el-button type="primary">上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import LineL from './component/lineL/index.vue'
import LineR from './component/lineR/index.vue'
//import chartLine from './component/chart.vue'
import {
  reqLine3ResultByPage,
  reqLine3ImageListById,
  reqRpExcelDataExport,
} from '@/api/rockpanel'
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import {
  rockPanelDto,
  ImageListResponseData,
  dialogInfoType,
} from '@/api/rockpanel/type'
import { ElMessage, buttonEmits } from 'element-plus'
import carlayout from './component/carlayout.vue'
import setting from '@/setting'
//@ts-ignore
import moment from 'moment'

let pageNo = ref(1)
let pageSize = ref(10)
let query = reactive<rockPanelDto>({
  skidNumber: '',
  carType: '',
  carNumber: '',
  eva: '',
  startTime: '',
  endTime: '',
  orderBy: { prop: '', order: '' },
})
let pageData = ref([])
let total = ref()
//时间选择参数
let dateTimepickUp = ref('')
let visible = ref(false)
let dialogInfo = reactive<dialogInfoType>({
  Nr: 0,
  SkidNumber: '',
  CarNumber: '',
  imgList: [],
})
let dialogImportVisible = ref()
//存储当前时间
let time = ref(moment().format('YYYY年MM月DD日 hh:mm:ss'))
let timer = ref(0)

onMounted(() => {
  getLine3ListByPage()
  timer.value = setInterval(() => {
    time.value = moment().format('YYYY年MM月DD日 hh:mm:ss')
  }, 1000)
})


//销毁定时器
onBeforeUnmount(() => {
  clearInterval(timer.value)
})
//获取列表数据
const getLine3ListByPage = async (page = 1) => {
  pageNo.value = page
  let result = await reqLine3ResultByPage(pageNo.value, pageSize.value, query)
  console.log('返回' + result)
  if (result.code == 200) {
    pageData.value = result.data.pageData
    total.value = result.data.totalSize
  }
  console.log(result)
}
const search = () => {
  getLine3ListByPage()
}

const reset = () => {
  Object.assign(query, {
    skidNumber: '',
    carType: '',
    carNumber: '',
    eva: '',
    startTime: '',
    endTime: '',
    orderBy: { prop: '', order: '' },
  })
  //清空时间pickup
  dateTimepickUp.value = ''
  getLine3ListByPage()
}
//表格配色
const tableRowClassName = ({ row, rowIndex }) => {
  if (row.Eva == 'warning') {
    return 'warning-row'
  } else if (row.Eva == 'bad') {
    return 'danger-row'
  }
  return ''
}
//时间选择器
const shortcuts = [
  {
    text: '上周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '上月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '上3个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
//点击时间选择器确定后传送参数至Query
const datepickup = (value: any) => {
  ;(query.startTime = value[0]), (query.endTime = value[1]), console.log(query)
}
//打开图片对话框
const openDia = async (row: any) => {
  //清空原先残留数据，此次两个S\C首字母大写，因为JSON返回是大写

  Object.assign(dialogInfo, {
    Nr: 0,
    SkidNumber: '',
    CarNumber: '',
    imgList: [],
  })

  //获取改行的数据
  dialogInfo = { ...row }
  //该接口获取图片集（Java已经按[{name:xx,url:xx}]）
  let result: ImageListResponseData = await reqLine3ImageListById(row.Nr)
  if (result.code == 200) {
    dialogInfo.imgList = result.data
    visible.value = true
  } else {
    ElMessage({
      type: 'error',
      message: '获取图片失败',
    })
  }
}
//
const sortChange = (data: any) => {
  console.log(data)
  query.orderBy.order = data.order == 'ascending' ? 'ASC' : 'DESC'
  query.orderBy.prop = data.prop
  getLine3ListByPage()
}
const exportData = () => {
  console.log('导出数据')
  reqRpExcelDataExport().then((res) => {
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
    const link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = '门槛2站导出数据.xls'
    link.click()
  })
}
//导入按钮
const importData = () => {
  dialogImportVisible.value = true
}

// 导入数据成功以后要执行方法
const onUploadSuccess = async (response, file) => {
  ElMessage.success('导入成功')
  dialogImportVisible.value = false
  //重新获取数据
  getLine3ListByPage()
}

</script>

<style scoped lang="scss">
.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.my-header {
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  .close-btn {
    position: absolute;
    top: 10px;
    right: 30px;
  }
}
.time {
  position: relative;
  top: 40px;
  display: flex;
  z-index: 99;
  justify-content: right;
  margin-right: 20px;
}

.imgcontainer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-box {
  display: flex;
  height: 62vh;
  width: 90vw;
  background: hwb(125 71% 4%);
  //justify-content: left; /* 水平居中 */
  background-size: cover;
  justify-content: center;
  //align-items: center;
  justify: 'space-around';

  .card-contentL {
    flex: 1; /* 使得三个div均等分，占据相同的宽度 */
    margin-right: 20px;
    border: 1px solid #02268a;
    border-radius: 10px;
    float: left;
    width: 400px;
    height: 400px;
    //left: 5px;
    background: rgb(215, 241, 209);
    background-size: cover;
  }
  .card-contentR {
    margin-right: 90px;
    flex: 1; /* 使得div均等分，占据相同的宽度 */
    border-radius: 10px;
    border: 1px solid #2f0ed5;
    float: right;
    width: 400px;
    height: 400px;
    background: rgb(223, 248, 251);
    background-size: cover;
  }
}
</style>
